<template>
  <div class="detail-content" ref="boxRef">
    <div class="detail-box">
      <!-- 课程信息 -->
      <div class="kcx-1">
        <div class="wens-1">
          <div class="texs-2">{{ kcjobj.kcmc }}</div>
          <div class="texs-3">
            {{ kcjobj.kcjj }}
          </div>
          <div class="kecxs-1">
            <div class="wez-1 masx-1">
              课程号：<span class="wz-s1"> {{ kcjobj.kch }}</span>
            </div>
            <div class="wez-1">
              教学班：<span class="wz-s1">{{ jxb }}</span>
            </div>
          </div>
          <div class="souk-1">
            授课教师：
            <div class="lsx-1" v-for="(item, index) in jsarr" :key="index">
              <img :src="item.photoUrl" class="lis-img" />
              {{ item.nickName }}
            </div>
          </div>
        </div>
        <img
          class="imgs-1"
          :src="kcjobj.kcImgUrl ? kcjobj.kcImgUrl : defaultCover"
        />
        <img src="./img/pic_AIcou.png" class="iocn-1" />
      </div>
    </div>
    <!-- 导航 -->
    <div class="navigation-box">
      <div
        class="detailNavigation w-100 display-flex"
        ref="navigationRef"
        :class="{ 'fixed-nav': isNavFixed }"
      >
        <div
          class="navigation-item color-2F3133 font-size-16 cursor-pointer text-center"
          :class="selectIndex == index ? 'active-navigation' : ''"
          v-for="(item, index) in navigationList"
          :key="index"
          @click="handleNavigation(index)"
        >
          {{ item.titile }}
        </div>
      </div>
    </div>

    <div class="container">
      <!-- 内容区域 -->
      <!-- 课程概述 -->
      <courseOverview
        v-if="selectIndex == 0"
        :sections="sections"
      ></courseOverview>
      <!-- 课程目录 -->
      <courseOutline v-if="selectIndex == 1" :data="kcmlarr"></courseOutline>
      <!-- 知识图谱 -->

      <MindMapViewer :data="swdata" v-if="selectIndex == 2"></MindMapViewer>

      <!-- 教学团队 -->
      <!-- <teachingTeam v-if="selectIndex == 2"></teachingTeam> -->
      <!-- 督导点评 -->
      <!-- <supervisorComments v-if="selectIndex == 6"></supervisorComments> -->
      <!-- 学生评价 -->
      <!-- <studentEvaluation v-if="selectIndex == 7"></studentEvaluation> -->
      <!-- 相关课程 -->
      <!-- <relatedCourses v-if="selectIndex == 9"></relatedCourses> -->
      <!-- AI教学工坊 -->
      <!-- <aiTeachingWorkshop v-if="selectIndex == 10"></aiTeachingWorkshop> -->
    </div>
  </div>
</template>

<script lang="ts" setup>
import { onMounted } from 'vue'

import defaultCover from './img/defaultCover.png'
import {
  getCourseIntroduce,
  getteacherData,
  getKnowledgeGraph,
  getCourseCatalog
} from '@/services/Application'
import courseOverview from './components/courseOverview.vue'
import courseOutline from './components/courseOutline.vue'
import teachingTeam from './components/teachingTeam.vue'
import supervisorComments from './components/supervisorComments.vue'
import studentEvaluation from './components/studentEvaluation.vue'
import relatedCourses from './components/relatedCourses.vue'
import aiTeachingWorkshop from './components/aiTeachingWorkshop.vue'
import { useRoute } from 'vue-router'
const sections = ref([
  {
    title: '课程简介',
    content:
      '这节课主要围绕园艺植物保护学展开，老师首先提醒考试相关事宜，强调熟悉课本。接着讲解不同种植制度下耕地物质平衡，包括自然途径中土壤肥力的产生与发展，以及不同根基情况对土壤肥力的影响。还阐述了培肥土壤的方法，如生物培肥、化学培肥等，以及肥料利用率的相关知识和平衡计算公式。之后介绍国家耕作制度的规划、发展、区划原则和具体分区情况。最后回顾课程重点，如间套作、复种、轮作等概念及相关原理，并指导应对考试的方法。 这节课主要围绕耕作学展开，老师首先提醒考试相关事宜，强调熟悉课本。接着讲解不同种植制度下耕地物质平衡，包括自然途径中土壤肥力的产生与发展，以及不同根基情况对土壤肥力的影响。还阐述了培肥土壤的方法，如生物培肥、化学培肥等，以及肥料利用率的相关知识和平衡计算公式。之后介绍国家耕作制度的规划、发展、区划原则和具体分区情况。最后回顾课程重点，如间套作、复种、轮作等概念及相关原理，并指导应对考试的方法。'
  },
  {
    title: 'AI课程介绍',
    content:
      '《园艺植物保护学》是一门在园艺学科体系里有着关键地位的课程，它围绕园艺植物保护这一核心，将各类相关知识与实用技能有机融合。课程详细讲授了应对有害生物、防治植物病害等多方面内容，如同为园艺植物打造了一套坚实的 “防护铠甲”，助力它们茁壮成长，保障园艺生产能够收获优质且高产的成果。在害虫防治方面，课程全面且深入地涵盖了常见害虫的诸多知识要点。从各类害虫的种类、形态特征、危害特点、生活史，到行之有效的具体防治方法，均有详尽的讲解。例如，针对天牛、李小石心虫等果实害虫，细致剖析其危害作物范围、特征、发生代数等关键信息，从而清晰地呈现出综合防控的思路与方法；对于介壳虫、叶蝉、蓟马等害虫，也分别从它们的发生代数、危害方式、传毒特点以及对应的防治重点与措施等角度进行细致阐述。同时，还深度探究了害虫防治的多种途径，包含生物防治（如经典生物防治、保育、增益及利用生物农药等）、物理防治（利用机械捕杀、温度控制等手段）以及化学防治（提及 3R 问题、农药种类、选药原则等），并结合小菜蛾、菜青虫等常见害虫案例，进一步强化对防治要点的把握。此外，还涉及昆虫分类与识别、昆虫监测与预测等专业内容，像介绍昆虫在田间的分布类型与抽样方案制定的关联，讲解发生期、发生量的预测方法等，为更科学精准地开展害虫防治工作提供有力支撑。在植物病害相关知识板块，课程同样有着丰富且详实的内容。先是对众多植物病害，如柑橘黄龙病、病毒病、白粉病、锈病等进行深度剖析，细致讲解它们被列为检疫性病害的原因、具体的症状表现、传播途径以及相应的防治手段等。对于植物病害发生的整个过程，从病原物侵入前期到发病期各阶段的特点及影响因素也逐一进行系统阐述，还介绍了如垂直抗病性、水平抗病性等植物抗病相关概念，以及植物与病原物互作模式等重要知识。同时，针对蔬菜、果树等不同园艺植物常见病害，像蔬菜的白霉病、灰霉病，果树的梨锈病等，详细说明其症状表现、发病规律，并传授选用抗病品种、合理轮作、正确使用农药等贴合实际的防治方法。另外，还涵盖了植物病毒、菌物、细菌和病毒病害等多方面知识，例如病毒的理化特性、复制过程、分类规则，菌物的生活史、分类及命名规则，细菌病害的症状特点、鉴定方法等内容，全方位构建起植物病害防治知识体系。不仅如此，课程还对昆虫的身体结构、内部系统、生长发育等基础知识进行了系统且有条理的讲解，涵盖昆虫的口气类型、胸部结构、消化系统、神经系统等诸多内容，这有助于深入理解昆虫的生理构造与生命活动规律，为更好地识别昆虫以及依据昆虫习性开展高效的防治工作筑牢基础。总而言之，《园艺植物保护学》这门课程为学习者开启了一扇通往园艺植物保护专业领域的大门，通过系统深入地学习其中的知识，学习者能掌握扎实全面的专业本领，在面对种类繁多的有害生物和错综复杂的植物病害时，做到精准辨别、有效应对，运用科学合理的防治策略守护园艺植物的健康，推动园艺产业沿着可持续发展的道路稳步前行，在丰富人们生活、美化环境等诸多方面持续发挥重要价值。'
  }
  // {
  //   title: '公开课程简介',
  //   content:
  //     '这节课主要围绕园艺植物保护学展开，老师首先提醒考试相关事宜，强调熟悉课本。接着讲解不同种植制度下耕地物质平衡，包括自然途径中土壤肥力的产生与发展，以及不同根基情况对土壤肥力的影响。还阐述了培肥土壤的方法，如生物培肥、化学培肥等，以及肥料利用率的相关知识和平衡计算公式。之后介绍国家耕作制度的规划、发展、区划原则和具体分区情况。最后回顾课程重点，如间套作、复种、轮作等概念及相关原理，并指导应对考试的方法。 这节课主要围绕耕作学展开，老师首先提醒考试相关事宜，强调熟悉课本。接着讲解不同种植制度下耕地物质平衡，包括自然途径中土壤肥力的产生与发展，以及不同根基情况对土壤肥力的影响。还阐述了培肥土壤的方法，如生物培肥、化学培肥等，以及肥料利用率的相关知识和平衡计算公式。之后介绍国家耕作制度的规划、发展、区划原则和具体分区情况。最后回顾课程重点，如间套作、复种、轮作等概念及相关原理，并指导应对考试的方法。'
  // }
])
const selectIndex = ref(0)
const userNames = ref('')
const route = useRoute()
const kcjobj: any = ref({})
const jxb = ref('')
const kch = ref('')
const kcmlarr: any = ref([])
const zsobj = ref({
  kch: '',
  xn: '',
  xq: ''
})
const isNavFixed = ref(false)
const swdata = ref({
  nodeData: {
    id: 'root',
    topic: '暂无数据',
    children: [
      {
        id: 1,
        topic: '1',
        pid: 2,
        knowledgeLevel: 3,
        //url: item.url,
        startTime: '3',
        endTime: '2',
        children: []
      }
    ]
  }
})
const buildTree = (parentId: any, list: any) => {
  return list
    .filter((item: any) => item.pid === parentId)
    .map((item: any) => ({
      id: item.id,
      pid: item.pid,
      knowledgeLevel: item.knowledgeLevel,
      topic: item.name,
      url: item.url || '',
      startTime: item.startTime,
      endTime: item.endTime,
      children: buildTree(item.id, list) // 递归构建子节点
    }))
}

const getMpdatas = async () => {
  const res = await getKnowledgeGraph(zsobj.value)
  const dataList = res.data || []

  // 设置根节点名称
  swdata.value.nodeData.topic = dataList[0]?.kcmc || '暂无数据'

  // knowledgeLevel=2 的都挂在 root 下
  const children = dataList
    .filter((item: any) => item.knowledgeLevel === 2)
    .map((item: any) => ({
      id: item.id,
      topic: item.name,
      pid: item.pid,
      knowledgeLevel: item.knowledgeLevel,
      //url: item.url,
      startTime: item.startTime,
      endTime: item.endTime,
      children: buildTree(item.id, dataList)
    }))

  swdata.value.nodeData.children = children
}

const navigationList = ref([
  {
    index: 0,
    titile: '课程概述'
  },
  {
    index: 1,
    titile: '课程目录'
  },
  {
    index: 2,
    titile: '知识图谱'
  }
  // {
  //   index: 3,
  //   titile: '教学大纲'
  // },
  // {
  //   index: 4,
  //   titile: '授课计划'
  // },
  // {
  //   index: 5,
  //   titile: '知识图谱'
  // },
  // {
  //   index: 6,
  //   titile: '督导点评'
  // },
  // {
  //   index: 7,
  //   titile: '学生评价'
  // },
  // {
  //   index: 8,
  //   titile: 'AI评课'
  // },
  // {
  //   index: 9,
  //   titile: '相关课程'
  // },
  // {
  //   index: 10,
  //   titile: 'AI教学工坊'
  // },
  // {
  //   index: 11,
  //   titile: 'AI助手'
  // }
])
const jsarr: any = ref([])
const getjsarr = async () => {
  const res = await getteacherData(userNames.value)
  jsarr.value = res.data
}
const navigationRef = ref<HTMLElement | null>(null)
const getkcarr = async () => {
  const res = await getCourseIntroduce(kch.value)
  kcjobj.value = res.data
  sections.value[0].content = kcjobj.value.kcjj || '暂无课程简介'
  sections.value[1].content = kcjobj.value.kcjs || '暂无AI课程介绍'
}
const getkcmlarr = async () => {
  const objs = {
    kch: kch.value,
    xn: zsobj.value.xn,
    xq: zsobj.value.xq,
    bh: jxb.value
  }
  const res = await getCourseCatalog(objs)
  // kcmlarr.value = res.rows || []
  const arr: any = []
  res.rows.forEach((item: any) => {
    arr.push(item.viewDate)
    item.titles = `第${item.xueshi}学时 | ${item.title || ''}`
  })
  //去重
  const uniqueArr = Array.from(new Set(arr))
  kcmlarr.value = uniqueArr.map((date: any, index: any) => {
    return {
      name: `第${index + 1}单元`,
      arr: res.rows.filter((item: any) => item.viewDate === date)
    }
  })
}
onMounted(() => {
  kch.value = route.query.id as string
  jxb.value = route.query.bh as string
  zsobj.value.kch = route.query.id as string
  zsobj.value.xn = route.query.xn as string
  zsobj.value.xq = route.query.xq as string
  userNames.value = encodeURI(route.query.ghs as string)
  getkcarr()
  getjsarr()
  getMpdatas()
  getkcmlarr()
})

const handleNavigation = (val: any) => {
  selectIndex.value = val
}
</script>

<style lang="scss" scoped>
.detail-content {
  width: 100%;
  height: 100%;
  background-image: url('@/assets/images/detail_bg.png');
  background-repeat: no-repeat;
  background-size: 100% 100%;
  background-position: center;
  padding: 32px 0;
  box-sizing: border-box;
  .detail-box {
    height: 338px;
    margin: 0 180px;
    .kcx-1 {
      position: relative;
      width: 1560px;
      height: 338px;
      padding: 16px 24px;
      display: flex;
      align-items: center;
      justify-content: space-between;
      background-image: url('./img/bgs.png');
      background-repeat: no-repeat;
      background-size: 1562px 340px;
      background-position: center;
      overflow: hidden;
      border-radius: 12px;

      .wens-1 {
        width: 952px;
        .texs-2 {
          margin-bottom: 16px;
          font-family:
            Alimama ShuHeiTi,
            Alimama ShuHeiTi;
          font-weight: bold;
          font-size: 36px;
          color: #18191a;
        }
        .texs-3 {
          font-weight: 400;
          font-size: 16px;
          color: #2f3133;
          margin-bottom: 48px;
        }
        .kecxs-1 {
          display: flex;
          margin-bottom: 40px;
          .wez-1 {
            font-weight: 400;
            font-size: 14px;
            color: #696e76;
          }
        }
      }
      .souk-1 {
        display: flex;
        align-items: center;
        font-size: 14px;
        color: #696e76;
        .lsx-1 {
          display: flex;
          align-items: center;
          margin: 0 10px;
          .lis-img {
            width: 24px;
            height: 24px;
            border-radius: 50%;
            margin-right: 4px;
          }
        }
      }
      .imgs-1 {
        width: 544px;
        height: 306px;
      }

      .iocn-1 {
        position: absolute;
        top: 0;
        left: 0;
        width: 188px;
        height: 66px;
        z-index: 99;
      }
    }
  }
}

.masx-1 {
  margin-right: 85px;
}
.wz-s1 {
  font-family:
    Alimama ShuHeiTi,
    Alimama ShuHeiTi;
  font-weight: bold;
  font-size: 16px;
  color: #2f3133;
}

// 导航
.navigation-box {
  padding: 0 180px;
  box-sizing: border-box;
  position: sticky;
  top: 0;
  z-index: 100;
}
.detailNavigation {
  height: 80px;
  border-radius: 100px;
  margin-top: 32px;
  padding: 20px 75px 20px 6px;
  box-sizing: border-box;
  background: linear-gradient(to right, #fff, #f1f7ff, #fff);
  .navigation-item {
    font-family: 'ShuHeiTi-Bold';
    font-weight: 700;
    width: 84px;
    height: 40px;
    margin: 0 30px;
    line-height: 40px;
  }
  .active-navigation {
    background-image: url('@/assets/images/tab_kcgs.png');
    background-repeat: no-repeat;
    background-position-x: right;
    background-position-y: bottom;
    background-size: 84px 40px;
  }
}

.color-2f3133 {
  color: #2f3133;
}

.container {
  padding: 0 180px 40px;
  box-sizing: border-box;
}

.fixed-nav {
  margin-top: 0;
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
}
</style>
